<template>
  <div class="main">
    <van-nav-bar title="就诊人记录" left-text="返回" left-arrow  @click-left="onClickLeft">
    </van-nav-bar>
    <van-cell-group border="true">
      <van-cell style="border-radius:10px;">
        <!-- 使用 title 插槽来自定义标题 -->
        <div style="border-radius:10px">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option" />
          </van-dropdown-menu>
          <div style="float: right">
            <span class="text-gray-word" style="text-align: right;">仅仅查询近180天订单</span>
          </div>
        </div>
      </van-cell>
        <van-row type="flex" justify="center">
        <van-col span="4" style="text-align: center">
            <van-icon class="iconfont" class-prefix="icon" name="yiyuan"></van-icon>
        </van-col>
        <van-col span="16"><span class="text-overstriking">dwdwdwdwdwdwdasdssawda</span></van-col>
        <van-col span="4"><span style="font-size: 20px;color: #3399ff">预约成功></span></van-col>
      </van-row>
    </van-cell-group>
    <van-field readonly
      v-model="keshi"
      name="就诊科室"
      label="就诊科室"
      value="普通外科"
    />
    <van-field
      readonly
      clickable
      name="datetimePicker"
      :value="keshiTime"
      label="就诊时间"
      placeholder="点击选择时间"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="date"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-field readonly
      v-model="zhengjian"
      label="挂号证件"
      value="311021989884884848"
    />
  </div>
</template>

<script>
export default {
  name: 'ReserveInformation',
  components: {
  },
  props: [
  ],
  data () {
    return {
      keshi: '',
      keshiTime: '',
      zhengjian: '',
      showPicker: false,
      value: 0,
      option: [
        { text: '当前就诊人:王天辰', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2050, 10, 1)
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  watch: {
  },
  methods: {
    onConfirm (date) {
      this.keshiTime = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.showPicker = false
    },
    clickCity (city) {
      this.city = city
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
